<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>06-canvas绘制柱状图</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>
  <script>
    // 1. 获取页面标签对象
    const canvas = document.getElementById('canvas')
    // 2. 创建画笔对象
    const ctx = canvas.getContext('2d')
    // 3. 绘制图形
    // 外面的垂直线
    ctx.moveTo(100,90)
    ctx.lineTo(100,510); // 5*80 + 100 + 10
    ctx.stroke();
    // 水平线
    ctx.moveTo(90,500)
    ctx.lineTo(720,500); // 5*80 + 100 + 10
    ctx.stroke();
    // 画垂直的刻度
    ctx.moveTo(100,100)
    ctx.lineTo(90,100);

    ctx.moveTo(100,180)
    ctx.lineTo(90,180);

    ctx.moveTo(100,260)
    ctx.lineTo(90,260);

    ctx.moveTo(100,340)
    ctx.lineTo(90,340);

    ctx.moveTo(100,420)
    ctx.lineTo(90,420);

    // 画水平线上的刻度
    ctx.moveTo(250,500);
    ctx.lineTo(250,510)

    ctx.moveTo(400,500);
    ctx.lineTo(400,510)

    ctx.moveTo(550,500);
    ctx.lineTo(550,510)
    ctx.moveTo(700,500);
    ctx.lineTo(700,510)

    // 继续画水平线
    ctx.moveTo(100,100)
    ctx.lineTo(720,100);

    ctx.moveTo(100,180)
    ctx.lineTo(720,180);

    ctx.moveTo(100,260)
    ctx.lineTo(720,260);

    ctx.moveTo(100,340)
    ctx.lineTo(720,340);

    ctx.moveTo(100,420)
    ctx.lineTo(720,420);
    ctx.stroke();

    // 画矩形 
    ctx.fillStyle='red';
    ctx.fillRect(115,500,120,-270)
    ctx.fillRect(265,500,120,-350)
    ctx.fillRect(415,500,120,-240)
    ctx.fillRect(565,500,120,-390)

    
    // 添加文字内容 
    ctx.fillStyle='blue';
    ctx.fillText('150',70,104,100)
    ctx.fillText('120',70,184,100)
    ctx.fillText('90',76,264,100)
    ctx.fillText('60',76,344,100)
    ctx.fillText('30',76,424,100)
    ctx.fillText('0',82,504,100)

    // 水平文字内容
    ctx.font='20px 微软雅黑'
    ctx.fillText('食品',160,520,100)
    ctx.fillText('数码',310,520,100)
    ctx.fillText('服饰',460,520,100)
    ctx.fillText('箱包',610,520,100)

    ctx.font='30px 宋体'
    ctx.fillStyle='orangered'
    ctx.fillText('数据可视化-ECharts入门案例',20,40,300)
  </script>
</body>
</html>